<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_异步函数-异步函数返回值</title>
  <!-- 
  在 JavaScript 中，异步函数（async functions）是一种用于处理异步操作的简洁方式。它们允许我们以更直观的方式编写异步代码，类似于同步代码。
  1. 定义异步函数

  使用  `async`  关键字定义一个异步函数。异步函数会自动返回一个 Promise。
  示例代码：
  async function fetchData() {
      // 函数体
  }
  2. 使用  `await`  关键字
  在异步函数内部，可以使用  `await`  关键字来等待一个 Promise 的结果。 `await`  只能在  `async`  函数内部使用。

  示例代码：
  async function fetchData() {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      return data;
  }
  3. 错误处理

  在异步函数中，可以使用  `try...catch`  语句来处理可能出现的错误。这使得错误处理变得更加直观。

  示例代码：
  async function fetchData() {
      try {
          const response = await fetch('https://api.example.com/data');
          if (!response.ok) {
              throw new Error('Network response was not ok');
          }
          const data = await response.json();
          return data;
      } catch (error) {
          console.error('Error fetching data:', error);
      }
  }
  4. 调用异步函数

  调用异步函数时，可以使用  `then()`  方法处理返回的 Promise，或者在另一个异步函数中使用  `await`  关键字等待其完成。

  示例代码：
  // 使用 then() 方法
  fetchData().then(data => {
      console.log(data);
  });

  // 在另一个 async 函数中使用 await
  async function main() {
      const data = await fetchData();
      console.log(data);
  }

  main();
  5. 总结
  - 简洁性：异步函数使得异步代码的编写更加简洁，类似于同步代码的逻辑。
  - Promise：异步函数自动返回一个 Promise，方便处理异步结果。
  - 错误处理：通过  `try...catch`  语句，可以优雅地处理异步操作中的错误。
  - 可读性：使用  `await`  可以使代码的逻辑流程更加清晰，易于理解。
  -->
</head>
<body>

  <script>
    // 返回值的区别
    // 1. 普通函数返回值
    function foo() {
      return 123
    }
    const res1 = foo()
    console.log(res1)

    // 2. 异步函数返回值
    async function bar() {
      return 123
    }
    const res2 = bar()
    console.log(res2) // Promise {<fulfilled>: 123}

    async function asyncFn() {
      // return 123
    }
    const fn = asyncFn()
    console.log(fn) // Promise {<fulfilled>: undefined}

    // 3. 异步函数返回promise
    async function baz() {
      return Promise.resolve(123)
    }
    const res3 = baz()
    console.log(res3) // Promise {<pending>}
    
  </script>
  
</body>
</html>